<template>
  <div v-if="orderStatus == 'SUCCESS'">
    <div class="pay-success" >
      <div class="pay-sta" >
        <div class="icon"><span class="icon-success iconfont"></span></div>
        <div style="color:#b4272d">支付成功</div>
      </div>
      <div class="pay-infoli">
        <div class="pay-info">
          <div>订单号：</div>
          <div class="text">{{orderNum}}</div>
        </div>
        <div class="pay-info">
          <div>本次支付金额：</div>
          <div class="text">¥{{payAmount}}</div>
        </div>
      </div>
      <div class="pay-create">下单时间：2018-3-3 19:22</div>
      <div class="pay-btn">
        <router-link tag="div" class="pay-look" :to="{ name: 'OrderList'}" v-show="iswx"><span>查看订单</span></router-link>
        <router-link tag="div" :to="'/'" class="pay-index" v-show="iswx"><span>返回首页</span></router-link>
        <router-link tag="div" :to="'/'" class="pay-index" v-show="!iswx" style="text-align:center;padding-left:0px;"><span>返回首页</span></router-link>
      </div>
    </div>
    <img :src="qrcode" style="width:7.5rem;margin: 0 auto;margin-top: 2rem;" v-if="qrcode" >
    <!-- <img src="" style="width:7.5rem;margin: 0 auto;margin-top: 2rem;" v-else="qrcode" > -->
  </div>
  <div class="pay-success" v-else>
    <div class="pay-sta" style="border-bottom:none">
      <div class="icon"><span class="icon-close iconfont" style="color:#a5a4a4"></span></div>
      <div>支付失败</div>
    </div>
    <div class="pay-btn">
      <div class="pay-look"  @click="rePay" ><span>重新支付</span></div>
      <router-link tag="div" :to="'/'" class="pay-index"><span>返回</span></router-link>
    </div>
  </div>
</template>
<script>
  import Vue from 'vue'
  // import Lockr from 'lockr'
  export default {
    name: 'success',
    data () {
      return {
        iswx: true,
        orderNum: '',
        orderStatus: '',
        openid: '',
        qrcode: '',
        payAmount: 0
      }
    },
    mounted: function () {
      if (Vue.prototype.$payWay === 200) {
        this.iswx = false
      } else {
        this.iswx = true
      }
      this.init()
    },
    methods: {
      init: function () {
        let payinfo = this.$route.query
        this.orderStatus = payinfo.status
        this.orderNum = payinfo.orderNo
        this.payAmount = payinfo.payAmount
        if (this.orderStatus !== 'SUCCESS') {
          document.title = '支付失败'
          this.getopenid()
        }
        if (this.orderStatus === 'SUCCESS') {
          // 获取客服二维码
          this.getqrcode()
        }
        this.$tools.loading(false)
      },
      getqrcode: function () {
        let _this = this
        let type = this.iswx ? 'wechat' : 'alipay'
        this.$EcHttpUtils.get('/order/qrcode.json', {orderNo: this.orderNum, type: type}).then(function (resp) {
          if (resp.data.statusCode === 0) {
            // console.log(resp.data)
            _this.qrcode = resp.data.data.qrCode
          }
        })
      },
      getopenid: function () {
        let _this = this
        this.$EcHttpUtils.get(_this.$Constants.CommonApiUrl.OPENID, {appid: 'wxdec0babc72769ecc'}).then(function (resp) {
          if (resp.data.statusCode === 0) {
            _this.openid = resp.data.data.openid
            console.log(_this.openid)
          }
        })
      },
      rePay: function () {
        // 支付相关问题
        let _this = this
        if (Vue.prototype.$payWay === 100) {
          let payInfoParam = {
            orderNo: _this.orderNum,
            redirectUrl: _this.$Constants.CommonApiUrl.payPage,
            body: '线下订单支付',
            appid: _this.$Constants.PAYAPPID,
            tradeType: 'JSAPI',
            openid: _this.openid,
            access_token: _this.$JzoAuth.getAccessToken()
          }
          _this.payPost(_this.$Constants.CommonApiUrl.wxPay, payInfoParam)
        } else if (Vue.prototype.$payWay === 200) {
          let newpayInfoParam = {
            orderNo: _this.orderNum,
            redirectUrl: _this.$Constants.CommonApiUrl.payPage,
            subject: '线下订单支付',
            body: '线下订单支付'
          }
          _this.payPost(_this.$Constants.CommonApiUrl.aliPay, newpayInfoParam)
        } else {
          alert('请在微信或者支付宝里打开')
          return false
        }
        // let payInfoParam = {
        //   orderNo: this.orderNum,
        //   redirectUrl: this.$Constants.CommonApiUrl.payPage,
        //   body: '线下订单支付',
        //   appid: this.$Constants.PAYAPPID,
        //   tradeType: 'JSAPI',
        //   openid: this.openid,
        //   access_token: this.$JzoAuth.getAccessToken()
        // }
        // // console.log(payInfoParam)
        // this.payPost(this.$Constants.CommonApiUrl.wxPay, payInfoParam)
      },
      // 判断支付方式
      // payWay: function () {
      //   let ua = window.navigator.userAgent.toLowerCase()
      //   if (ua.match(/MicroMessenger/i) && ua.match(/MicroMessenger/i).toString() === 'micromessenger') {
      //     return 100
      //   }
      //   if (ua.match(/AlipayClient/i) && ua.match(/AlipayClient/i).toString() === 'alipayclient') {
      //     return 200
      //   }
      //   return false
      // },
      // 支付模拟form表单提交
      payPost: function (URL, PARAMS) {
        var temp = document.createElement('form')
        temp.action = URL
        temp.method = 'post'
        temp.style.display = 'none'
        for (var x in PARAMS) {
          var opt = document.createElement('textarea')
          opt.name = x
          opt.value = PARAMS[x]
          temp.appendChild(opt)
        }
        document.body.appendChild(temp)
        temp.submit()
        return temp
      }
    }
  }
</script>
<style>
</style>
